/**
 * Licensed to Jasig under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Jasig licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* uPORTAL PORTLET LAYOUT CSS
 * These declarations are scoped for portlets (not the portal).
 * These declarations are specific to the "universality" theme.
 * This CSS is shared across all skins that use the "universality" theme.
 * These declarations work with the Fluid Skinning System (FSS) to establish the basic portal layout structure.
 * Only CSS that affects the layout (positioning) of major elements should be listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height, margin, border, padding, overflow
 * CSS that sets the visual style of portlets is handled by individual skins.
 * This CSS assumes the use of a CSS reset (by default the FSS "fss-reset.css") for browser normalization.
 */
 
/* uPORTAL DEVELOPMENT STANDARDS AND GUIDELINES
 * For the standards and guidelines that govern the user interface of uPortal portlets including HTML, CSS, JavaScript, accessibilty, naming conventions, 3rd Party libraries (like jQuery and the Fluid Skinning System) and more, refer to:
 * http://www.ja-sig.org/wiki/x/cQ
 */


/*====================================*/
/* Fluid Skinning System Extensions */
/*====================================*/
/* Overrides and extenstions to FSS specific to portlets. */

/* Helper: Widget */
/* 
 * The FSS fl-widget structure should be applied to portlets.
 * However, the fl-widget structure can be used for more than portlets.
 * These classes specify how the fl-widget classes style a portlet.
 * Use: .fl-widget.portlet
 */
.fl-widget.portlet {background:transparent; border:none;}
.fl-widget-content.portlet-content {padding:0 0.1em;}


/*====================================*/
/* uPortal Portlet Extensions */
/*====================================*/
/* uPortal-specific additions, extensions, and overrides. */

/* Portlet */
/* 
 * Portlet is a structural element, the root portlet div and namespace.
 * Portlet contains 
 * Portlets are mapped to the WAI-ARIA role "section";
 * "A renderable structural containment unit in a document or application."
 * Refer to: http://www.w3.org/TR/wai-aria/roles#section
 * Additional classes on the root div include:
 * the FSS structural class ("fl-widget")
 * the specific portlet class (e.g., "prm-mgr" for Permissions Manager portlet)
 * and the current portlet view class (e.g., "view-detail" for the Detail view).
 * For example: <div class="fl-widget portlet prm-mgr view-detail" role="section">
 */
.portlet {}


/* Decorators */
/* 
 * Global decorators that can be applied broadly.
 * For example, add the "highlight" class to give a piece of content visual importance.
 */
.portlet .hide {display:none !important;}

/* Columns */
/* 
 * Where FSS is not used, these helpers produce column layouts.
 */
.portlet .columns2 .column,
.portlet .columns3 .column,
.portlet .columns4 .column {float:left; display:inline;}


/* Views */
/* 
 * Lists different views of the portlet as tabbed navigation.
 * View navigation is the top-most content (sits above the Titlebar).
 * View navigation is mapped to the WAI-ARIA role "tablist";
 * "A list of tab elements, which are references to tabpanel elements"
 * Refer to: http://www.w3.org/TR/wai-aria/roles#tablist
 * Uses FSS fl-tabs for base structure and formatting.
 * Active view (selected tab) contents are contained in the fl-tab-content div
 * and mapped to the WAI-ARIA role "tabpanel".
 */
.portlet .portlet-views {}
.portlet .portlet-views > .tabs {}
.portlet .portlet-views > .content {padding:1em;}


/* Titlebar */
/* 
 * The portlet view "header" which minimally includes the view title.
 * Titlebar maps to the WAI-ARIA role "sectionhead";
 * "A structure that labels or summarizes the topic of its related section."
 * Refer to: http://www.w3.org/TR/wai-aria/roles#sectionhead
 * Titlebar may also contain:
 * Subtitle, breadcrumb, options, actions, tags, details or toolbar.
 * Subtitle is a secondary descriptor of the title, sits just below the title.
 * Breadcrumb is a navigation marker and trail, sits on top of the title.
 * Actions are primary actions directly associated with the title, displayed as links/s on the same line as the title.
 * Tags is a list of tags applied to the portlet/view.
 * Details is a metadata area; not the main content of the view, but supporting information of the title.
 */
.portlet .titlebar {position:relative; margin-bottom:1.5em;}
.portlet .titlebar .breadcrumb {margin-bottom:1em;}
.portlet .titlebar > .options {padding:0.5em 0;}
.portlet .titlebar ul {margin:0; padding:0; overflow:hidden; zoom:1;} 
.portlet .titlebar li {list-style-type:none; float:left; display:inline; padding:0 5px 0 5px;}
.portlet .titlebar .actions,
.portlet .titlebar .return-link {position:absolute; top:0; right:0;}
.portlet .titlebar .return-link {top:0.3em;}
.portlet .titlebar  .breadcrumb~.return-link {top:1.8em;}
.portlet .titlebar .toolbar {padding:3px 0 3px 0;}
.portlet .titlebar .toolbar ul {margin:0; padding:0; overflow:hidden; zoom:1;}
.portlet .titlebar .toolbar ul li {list-style-type:none; margin-right:5px; padding:10px 5px;}
.portlet .titlebar .toolbar .search {text-align:right;}
.portlet .titlebar .tags {padding-bottom:0.5em;}
.portlet .titlebar .details {margin:0 0 1em 0; padding:5px 10px;}
.portlet .titlebar .details .detail,
.portlet .titlebar .details .label {display:inline;}
.portlet .titlebar .details .detail~.detail {padding-left:1.5em;}
.portlet .titlebar .details a {margin:0;}
.portlet .portlet-titlebar > .title {margin:0;}
.portlet .portlet-titlebar > .subtitle {margin:0 0 1em 0; padding-top:0.2em;}


/* Search */
/*
 * Formatting for search forms(aside from general form formatting).
 */
.portlet .portlet-search form {margin-left:20px;}


/* Tags */
/*
 * A taxonomy of terms applied to the content, displayed as a horizontal list of links.
 */
.portlet .tags {}
.portlet .tags .label {display:inline;}
.portlet .tags a {margin:0;}


/* Content */
/* 
 * The main content area of the portlet view.
 * Content maps to the WAI-ARIA role "main";
 * "The main content of a document."
 * Refer to: http://www.w3.org/TR/wai-aria/roles#main
 */
.portlet .portlet-content {zoom:1; margin:5px 0 0 0; overflow: visible;}


/* Messages */
/* 
 * Dynamic system messages to tell people that an (otherwise invisible, backend) event occurred.
 * Messages can be of these types: status, info, error, alert, success.
 * Change the base CSS class for the appropriate type of message.
 * Use an appropriate WAI-ARIA role (either "status" or "alert") on the HTML element to describe the message.
 * Refer to: http://www.w3.org/TR/wai-aria/roles#status
 * Use an h3 for the message title, and a paragraph for the message text.
 * Messages communicate a system event, but should be written so that a _person_ can understand it. Use plain, people-oriented language. 
 */
.portlet .portlet-msg {padding:0.25em 0.25em 0.25em 2.25em;}
.portlet .portlet-msg .title {}
.portlet .portlet-msg .content {}


/* Notes */
/* 
 * Optional. These notes help people know what to do in the active portlet view.
 * Notes may also be used in Sections (below)
 * Maps to the WAI-ARIA role "note";
 * "A section whose content is parenthetic or ancillary to the main content of the resource."
 * Refer to: http://www.w3.org/TR/wai-aria/roles#note
 */
.portlet .portlet-content .note p {margin:0 0 1em 0;}


/* Sections */
/* 
 * A portlet-section is a structural element.
 * Sections are mapped to the WAI-ARIA role "region";
 * "A large perceivable section of a web page or document, 
 * that the author feels should be included in a summary of page features."
 * Refer to: http://www.w3.org/TR/wai-aria/roles#region
 * A section has a Titlebar (with Options), and Content.
 */
.portlet .portlet-section {margin-bottom:1em;}
.portlet .portlet-section > .titlebar .title {margin:0; padding-top:1em; padding-bottom:0.2em;}
.portlet .portlet-section > .titlebar .options {padding:0.5em 0em; text-align:right;}
.portlet .portlet-section > .titlebar .options .view-filter {text-align:left;}
.portlet .portlet-section > .titlebar .options > a {padding:0.1em 0.5em;}
.portlet .portlet-section > .content {}
.portlet .portlet-section > .content > .note {}


/* Section Titles */
/*
 * Unique treatment for specific section titles.
 */
.portlet .title.selections,
.portlet .title.search,
.portlet .title.browse {padding-bottom: 0; padding-left:20px;}


/* Tables */
/*
 * Tables are meant to be used for displaying data.  Avoid using tables for layout.
 * If you must use a table for layout, add the "purpose-layout" class to the table (no borders or colors on the table). 
 */
.portlet table.portlet-table th,
.portlet table.portlet-table td {padding:0.1em 1em;}
.portlet table.purpose-layout,
.portlet table.purpose-layout th,
.portlet table.purpose-layout td {padding:0;}
.portlet table.purpose-layout thead,
.portlet table.purpose-layout th {display:none;}


/* Forms */
/*
 * Use the "portlet-form" class on a form to produce a nicely formatted, boxed form.
 * Form buttons should use the following Buttons classes.
 */
/*.portlet form select,
.portlet form input[type="text"],
.portlet form textarea {margin-top:2px; font-size:11px;}
.portlet form input[type="text"],
.portlet form textarea {padding:3px;}*/
.portlet .portlet-form {width:auto; padding:1em; font-size:11px;}
.portlet .portlet-form form {margin:0;}
.portlet .portlet-form form fieldset {padding:0.5em 1em;}
.portlet .portlet-form form legend {margin-bottom:1em;}
.portlet .portlet-form form table {}
.portlet .portlet-form form table td {padding:0; border:none;}
.portlet .portlet-form form table td.label {padding-right:3px; text-align:right; width:100px; vertical-align:top; padding-top:5px;}
.portlet .portlet-form form .field-container {display:inline-block; padding:1px; position:relative; width:auto;}
.portlet .portlet-form form .inputtext,
.portlet .portlet-form form .inputpassword {width:206px;}
.portlet .portlet-form form .inputdate,
.portlet .portlet-form form .inputtime {width:94px;}
.portlet .portlet-form form .inputtime {margin-left:4px;}
.portlet .portlet-form form .buttons {margin:0 0 0 105px; border:none;}
.portlet .portlet-form.wider {width:600px;}
.portlet .portlet-form ul,
.portlet .portlet-form li {margin:0; padding:0; list-style-type:none;}
.portlet .portlet-form li {margin:0 0 5px 105px;}
.portlet .portlet-form li label {position:relative; top:-4px;}

/* Overflow box */
/*
 *
 */
.portlet .fl-overflow {width:185px; height:300px; margin:0 1em 1em 0; padding:0.31em; overflow-x:auto; overflow-y:scroll;}


/* Pager */
/*
 * Formats pagination controls.
 * Assumes the Fluid Infusion pager component.
 */
.portlet .view-pager ul {margin:0; padding:0;}
.portlet .fl-pager .fl-pager-ui li {list-style-type:none; display:inline-block;}
.fl-pager caption {padding:.63em 0em; margin-bottom:0em;}
.fl-pager th {cursor:pointer;}
.fl-pager-controls {padding:.69em .69em;}
.flc-pager-links a {vertical-align:middle;}

/* Auto Complete */
.up-autocomplete-dropdown {display: none; position: absolute; padding: 0px; min-width: 200px; min-width: 100px; z-index: 100}
/* close */
.up-autocomplete-dropdown .up-autocomplete-close {padding: 5px 7px; text-align: right;}
/* list */
.up-autocomplete-dropdown .up-autocomplete-matches {max-height: 250px; overflow: auto;}
.up-autocomplete-dropdown .up-autocomplete-matches,
.up-autocomplete-dropdown .up-autocomplete-matches li {padding: 5px; margin: 0; list-style: none;}
/* anchors */
.up-autocomplete-dropdown .up-autocomplete-matches a {display: block; padding:0; text-decoration:none;}
/* loader */
.up-autocomplete-dropdown .up-autocomplete-loading {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.up-autocomplete-dropdown .up-autocomplete-loading span {visibility: hidden;}
/* no members message */
.up-autocomplete-dropdown .up-autocomplete-noresults.info {display: none; margin: 5px 7px;}


/* Selection Basket */
.portlet .selection-basket a {padding: 0 0 0 20px;}


/* Breadcrumb */
.portlet .breadcrumb .title,
.portlet .breadcrumb .breadcrumbs {display: inline;}


/* Entity Browser */
.portlet .entity-browser .titlebar .title {float: left; margin-right: 5px;}
.portlet .entity-browser .titlebar .select,
.portlet .entity-browser .titlebar .select span {display: block; width: 16px; height: 16px; overflow: hidden;}
.portlet .entity-browser .titlebar .select {float: left;}
.portlet .entity-browser .titlebar .select span {visibility: hidden;}
/* member list */
.portlet .entity-browser .member-list,
.portlet .entity-browser .member-list li {padding: 0; margin: 0; list-style: none;}
.portlet .entity-browser .member-list {margin-left: .5em;}
.portlet .entity-browser .member-list a {display: block; padding: 1px 0 1px 20px;}


/* Search */
.portlet .search-dropdown {
    display: none; position: absolute; top: 0; left: 0; border: 1px solid #AAA; margin-left: 20px; padding: 0px; min-width: 200px; min-height: 100px;}
/* close */
.portlet .search-dropdown .search-close {padding: 5px 7px; text-align: right; border-bottom: 1px solid #CCC;}
/* list */
.portlet .search-dropdown .search-list {max-height: 250px; overflow: auto;}
.portlet .search-dropdown .search-list,
.portlet .search-dropdown .search-list li {padding: 0; margin: 0; list-style: none;}
.portlet .search-dropdown .search-list li {display: block; float:none; padding: 2px 5px;}
/* anchors */
.portlet .search-dropdown .search-list a {display: block; padding: 0 0 0 20px;}
/* loader */
.portlet .search-dropdown .search-loader {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.portlet .search-dropdown .search-loader span {visibility: hidden;}
/* no members message */
.portlet .search-dropdown .portlet-msg.info {display: none; margin: 5px 7px;}

/*
 * Single Selection View.
 */
.portlet .view-single-select {border: 1px solid #CCC; position: relative;}
.portlet .view-single-select .titlebar {padding: 8px 8px 6px 8px; border-bottom: 2px solid #CCC; margin-bottom: .5em;}
.portlet .view-single-select .content {padding: 8px 8px;}
/* selection */
.portlet .view-single-select .portlet-selection .title,
.portlet .view-single-select .portlet-selection .selection-basket {display: inline;}
.portlet .view-single-select .portlet-selection .title.selections {padding-left: 0;}
.portlet .view-single-select .selection-basket {padding-left: 5px;}
.portlet .view-single-select .selection-basket a {padding: 0;}
/* breadcrumb */
.portlet .view-single-select .breadcrumb {padding: 0 0;}
/* search */
.portlet .view-single-select .portlet-search {position: absolute; top: 4px; right: 8px;}


/*
 * Multiple Selection View.
 */
/* columns */
.portlet .view-multi-select .columns .column-left {padding-right: 5%;}
/* breadcrumb */
.portlet .view-multi-select .breadcrumb {padding: 0 0;}
/* browse */
.portlet .view-multi-select .entity-browser {position: relative; margin-right: 24px; }
.portlet .view-multi-select .columns-2 > * { float: left; }
.portlet .view-multi-select .entity-browser .titlebar {border: 1px solid #CCC; padding: 8px 8px 6px 8px; margin-bottom: 0; position: relative;}
.portlet .view-multi-select .entity-browser .content {padding: 8px 8px 12px 8px; border: 1px solid #CCC;}
.portlet .view-multi-select .columns-2 .fl-container-flex40 { margin-top:16px; }
/* selection */
.portlet .view-multi-select .portlet-selection {border: 1px solid #CCC;}
.portlet .view-multi-select .portlet-selection .titlebar {padding: 8px 8px 6px 8px; border-bottom: 2px solid #CCC; margin-bottom: 0; position: relative;}
.portlet .view-multi-select .portlet-selection .content {padding: 0px 0px 0px 0px;}
.portlet .view-multi-select .portlet-selection .title.selections {background: transparent; padding-left: 0;}
.portlet .view-multi-select .portlet-selection .selection-basket {border-bottom:1px solid #AAA; padding: 8px;}
.portlet .view-multi-select .portlet-selection .selection-basket ul {padding: 0; margin: 0; list-style: none; height: 200px; overflow: auto;}
.portlet .view-multi-select .portlet-selection .selection-basket li {padding: 0; margin: 0; list-style: none;}
.portlet .view-multi-select .portlet-selection .selection-basket a {display: block; padding: 1px 0 1px 20px;}
/* buttons */
.portlet .view-multi-select .buttons {margin-top: 0; padding-right: 8px; border-top: none; text-align: right;}
/* search */
.portlet .view-multi-select .portlet-search {position: absolute; top: 20px; right: 8px;}


/*====================================*/
/* Specific Portlets */
/*====================================*/
/* Style definitions for structures and elements unique to a specific portlet. */


/* CSyndFeed Channel - RSS */
.news-items ul,
.news-items li {margin:0;}
.news-items li {list-style:none;}
.news-items .news-item-excerpt {display:block; padding-top:0.3em;}
.news-source p {padding:1em;}


/* Groups Manager Channel */
.groupmgr-entity,
.groupmgr-group {padding:0.3em 1em; margin-bottom:0.5em;}
.groupmgr-entity strong,
.groupmgr-group strong {padding-right:1em;}
.groupmgr-entity table {margin:1em 0;}
.groupmgr-entity table th {padding:0.2em 1em;}
.groupmgr-entity table td {padding:0.5em 1em;}
.groupmgr-edit-group,
.groupmgr-close-group,
.groupmgr-done-editing,
.groupmgr-delete-group {padding-right:1em;}
.groupmgr-show-info,
.groupmgr-hide-info,
.groupmgr-remove-member {padding-left:1em;}
.groupmgr-edit-group img,
.groupmgr-close-group img,
.groupmgr-show-info img,
.groupmgr-done-editing img,
.groupmgr-delete-group img,
.groupmgr-remove-member img,
.groupmgr-hide-info img {padding-right:0.3em;}
.groupmgr-right-pane td label {display:block; text-align:right;}
.groupmgr-right-pane input {margin-right:0.5em;}

/* Permissions Portlet 
 * Styles the ongoing information shown in the title bar * 
 * */
ul.permission_info {padding:0; margin:0; clear:both;}
ul.permission_info li {display:inline; list-style:none; padding:0; margin:0 15px 0 0; border-right:1px solid;}
ul.permission_info li.last {border-right:none;}
.prm-mgr .permission-lookup {margin:1em 2em 2em 2em;}
.prm-mgr .permission-lookup form {margin:0; padding:0.7em 1em;}
.prm-mgr .permission-lookup form label,
.prm-mgr .permission-lookup form input {float:none;}
.prm-mgr .permission-lookup form label,
.prm-mgr .permission-lookup form input[type="text"],
.prm-mgr .permission-lookup form span {font-size:150%;}
.prm-mgr .permission-lookup form input[type="text"] {padding:1px 5px;}
.prm-mgr.view-listperms .panel-list {margin-top:2em;}
.prm-mgr.view-editperm #assignments,
.prm-mgr.view-editperm #assignments ul {margin:0;}
.prm-mgr.view-editperm #assignments li {list-style-type:none; line-height:30px;}
.prm-mgr.view-editperm #assignments ul li {padding-left:16px; position:relative;}
.prm-mgr.view-editperm #assignments ul .assignment-wrapper {display:block; padding-left:6px;}

/* Portlet Manager */
.preference-name {vertical-align: top;}


/**
 * Class used by script to fix old IE ZIndex issues. The JavaScript that goes with this class
 * is defined here:
 *  uportal-war/src/main/webapp/media/skins/universality/common/javascript/uportal/flyout-nav.js
 */
.on-top
{
  z-index: 10000;
}